@import "~styles/util.less";

.container {
    min-height: calc(100vh);
    background: #F5F5F5;

    .header {
        width: 750px;
        height: 928px;
        background: linear-gradient(202deg, rgba(57, 61, 74, 1) 0%, rgba(42, 40, 54, 1) 100%);
        box-sizing: border-box;
        padding-top: 60px;

        .payResult {
            text-align: center;

            .result {
                font-size: 36px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 50px;

                img {
                    margin-right: 20px;
                }
            }

            .payTips {
                height: 33px;
                font-size: 24px;
                color: rgba(255, 255, 255, .6);
                line-height: 33px;
                margin-top: 14px;
            }
        }

        .orderDetail {
            width: 710px;
            height: 370px;
            border-radius: 10px;
            margin: 53px auto 0;
            background: rgba(255, 255, 255, 1);


            .goodDetail {
                height: 270px;
                box-sizing: border-box;
                padding: 30px 24px 20px;
                display: flex;
                flex-direction: row;

                img {
                    width: 220px;
                    height: 220px;
                    margin-right: 18px;
                }

                .orderInfo {
                    width: 424px;

                    .title {
                        height: 90px;
                        font-size: 32px;
                        font-weight: 600;
                        color: rgba(34, 33, 45, 1);
                        line-height: 45px;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                        margin-bottom: 14px;
                    }

                    .orderTime,
                    .goodNum,
                    .goodPrice {
                        font-size: 28px;
                        color: rgba(34, 33, 45, .6);
                        line-height: 40px;

                        span {
                            font-weight: 600;
                            color: rgba(255, 83, 27, 1);
                        }
                    }



                }

            }

            .checkCode {
                box-shadow: 0px -1px 0px 0px rgba(221, 221, 221, 0.5);
                height: 100px;
                box-sizing: border-box;
                padding: 18px 24px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                .checkTips {
                    line-height: 64px;
                    font-size: 26px;
                    color: rgba(153, 153, 153, 1);
                }

                .checkBtn {
                    width: 160px;
                    height: 64px;
                    border-radius: 32px;
                    line-height: 64px;
                    text-align: center;
                    font-size: 28px;
                    color: rgba(34, 33, 45, 1);
                    border: 1px solid rgba(34, 33, 45, 1);
                }
            }
        }

        .advertising {
            text-align: center;
            margin-top: 14px;
        }

        .haidou {
            background: url(../images/haidou.png) no-repeat center;
            width: 710px;
            height: 130px;
            margin: 14px auto 0;
            box-sizing: border-box;
            padding-left: 112px;
            padding-top: 27px;
            
            .getHaidou {
                font-size: 24px;
                color: rgba(48, 49, 158, 1);
                line-height: 33px;
            }

            .tips {
                font-size: 28px;
                font-weight: 600;
                color: rgba(9, 0, 85, 1);
                line-height: 40px;
            }
        }

    }

    // .recommend {
    //     background: #FFF;
    //     padding: 30px 20px;

    //     .title {
    //         span {
    //             display: inline-block;
    //             width: 6px;
    //             height: 28px;
    //             background: rgba(248, 101, 53, 1);
    //             margin-left: 4px;
    //             margin-right: 10px;
    //         }

    //         height:45px;
    //         font-size:32px;
    //         font-weight:600;
    //         color:rgba(51, 51, 51, 1);
    //         line-height:45px;
    //     }

    //     .recommendGoodList {
    //         display: flex;
    //         flex-direction: row;
    //         flex-wrap: wrap;
    //         justify-content: space-between;
    //         padding-left: 10px;
    //         .goodInfo {
    //             width: 345px;
    //             margin-top: 30px;
    //             display: flex;
    //             flex-direction: row;

    //             .goodImg {
    //                 width: 168px;
    //                 height: 168px;
    //                 background: rgba(245, 245, 245, 1);
    //                 border-radius: 9px;
    //                 position: relative;
    //                 display: flex;
    //                 justify-content: center;
    //                 align-items: center;

    //                 .firstOrder {
    //                     position: absolute;
    //                     width: 101px;
    //                     height: 39px;
    //                     background: url(../images/firstOrder.png) no-repeat center;
    //                     font-size: 21px;
    //                     color: rgba(255, 255, 255, 1);
    //                     line-height: 35px;
    //                     text-align: center;
    //                     top: 10px;
    //                     left: -10px;
    //                 }

    //                 .sellOut {
    //                     position: absolute;
    //                     bottom: 0;
    //                     left: 0;
    //                     width: 168px;
    //                     height: 37px;
    //                     background: linear-gradient(135deg, rgba(228, 127, 131, 1) 0%, rgba(233, 76, 65, 1) 100%);
    //                     border-radius: 0px 0px 10px 10px;
    //                     font-size: 20px;
    //                     color: rgba(255, 255, 255, 1);
    //                     line-height: 37px;
    //                     text-align: center;

    //                 }

    //                 img {
    //                     max-width: 168px;
    //                 }
    //             }

    //             .detail {
    //                 width: 157px;
    //                 margin-left: 10px;

    //                 .gooodName {
    //                     height: 82px;
    //                     font-size: 29px;
    //                     font-weight: 600;
    //                     color: rgba(34, 33, 45, 1);
    //                     line-height: 41px;
    //                     text-overflow: -o-ellipsis-lastline;
    //                     overflow: hidden;
    //                     text-overflow: ellipsis;
    //                     display: -webkit-box;
    //                     -webkit-line-clamp: 2;
    //                     line-clamp: 2;
    //                     -webkit-box-orient: vertical;
    //                 }

    //                 .goodPrice {
    //                     font-size: 28px;
    //                     font-weight: 600;
    //                     color: rgba(255, 83, 27, 1);
    //                     line-height: 40px;
    //                     margin-top: 16px;
    //                 }

    //                 .originalCost {
    //                     text-decoration: line-through;
    //                     font-size: 22px;
    //                     color: rgba(168, 167, 177, 1);
    //                     line-height: 30px;

    //                 }
    //             }
    //         }
    //     }
    // }
    .bottomIcon {
        height: 107px;
        text-align: center;
        background: #F5F5F5;
        padding-top: 32px;
        box-sizing: border-box;
    }
}

.recommend {
    background: #FFF;
    padding: 30px 20px 10px;

    .title {
        span {
            display: inline-block;
            width: 6px;
            height: 28px;
            background: rgba(248, 101, 53, 1);
            margin-left: 4px;
            margin-right: 10px;
        }
    }

    .seckillGoods {
        margin-top: 17px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .seckillGoodsItem {
            height: 169px;
            display: flex;
            margin-bottom: 30px;

            .seckillGoodsItemImg {
                width: 169px;
                height: 169px;
                background-color: #F5F5F5;
                position: relative;

                .seckillGoodsItemImgContainer {
                    width: 149px;
                    height: 149px;
                    top: 10px;
                    left: 10px;
                    background-size: contain;
                    position: absolute;
                }

                .seckillGoodsItemSoldout {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(255, 255, 255, 0.5);
                    padding: 45px;
                    padding-top: 43px;
                    box-sizing: border-box;

                    div {
                        width: 80px;
                        height: 80px;
                        background-color: rgba(0, 0, 0, 0.7);
                        border-radius: 100px;
                        line-height: 80px;
                        text-align: center;
                        color: #fff;
                        font-size: 22px;
                    }
                }

                .seckillGoodsItemWillSoldout {
                    width: 170px;
                    height: 37px;
                    background: linear-gradient(135deg, rgba(228, 127, 131, 1) 0%, rgba(233, 76, 65, 1) 100%);
                    border-radius: 0px 0px 10px 10px;
                    font-size: 20px;
                    font-family: PingFangSC;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    bottom: 0;
                    left: 0;
                    position: absolute;
                    text-align: center;
                    line-height: 37px;
                }

                .seckillGoodsItemNews {
                    position: absolute;
                    width: 100px;
                    height: 32px;
                    background: linear-gradient(270deg, rgba(66, 109, 255, 1) 0%, rgba(24, 55, 255, 1) 100%);
                    border-radius: 2px;
                    font-size: 22px;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                    line-height: 32px;
                    left: -10px;
                    top: 10px;
                }
            }

            .seckillGoodsItemInfo {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 10px;
                width: 157px;

                .seckillGoodsItemName {
                    height: 82px;
                    font-size: 29px;
                    font-weight: 600;
                    color: rgba(34, 33, 45, 1);
                    line-height: 41px;
                    .ellipsis(2);
                }

                .seckillGoodsItemPrice {
                    font-size: 28px;
                    font-weight: 600;
                    color: rgba(255, 83, 27, 1);
                    line-height: 40px;
                    margin-top: 16px;
                }

                .recommendPrice {
                    text-decoration: line-through;
                    font-size: 22px;
                    color: rgba(168, 167, 177, 1);
                    line-height: 30px;
                }
            }
        }
    }
}